import React from 'react';

export interface CircleToggleProps {
  value: boolean;
  onClick: (skip: boolean) => void;
  activeOpacity?: number;
  inactiveOpacity?: number;
}

export const CircleToggle: React.FC<CircleToggleProps> = ({
  value,
  onClick,
  activeOpacity = 0.25,
  inactiveOpacity = 1,
}) => {
  const handleClick = (event: React.MouseEvent) => {
    event.preventDefault();
    onClick(!value);
  };

  return (
    <div
      onClick={handleClick}
      className={`w-5 h-5 rounded-full cursor-pointer bg-white border-2 border-black`}
      style={{ opacity: value ? activeOpacity : inactiveOpacity }}
    />
  );
};
